<template>
  <div class="my-cover">
    <div class="cover-btn" @click="popupDialog">
      <!-- 父传子 如果传过新的图片就用新的，否则就用默认图片 -->
      <img :src="value || coverImg" alt="" />
    </div>
    <!-- 对话框 -->
     <el-dialog
        title="请选择图片"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="888px">
        <!-- 选项卡 -->
        <el-tabs v-model="activeName" type="card" >
          <el-tab-pane label="素材库" name="material">
            <!-- 按钮单选框 -->
            <el-radio-group @change="toggleCollect" v-model="reqParams.collect" size="small">
              <el-radio-button :label="false">全部</el-radio-button>
              <el-radio-button :label="true">收藏</el-radio-button>
            </el-radio-group>
            <!-- 素材列表 -->
            <ul class="img-list">
              <li
                class="img-item"
                :class="{ 'active': curentImage === item.url }"
                v-for="item in images"
                :key="item.id"
                @click="addMask(item.url)">

                <img :src="item.url" alt="">
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="上传图片" name="upload">
            <!-- 上传 -->
            <el-upload
              class="avatar-uploader"
              name="image"
              :headers="imageHeaders"
              :action="imageBaseUrl"
              :show-file-list="false"
              :on-success="handleUploadSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tab-pane>
        </el-tabs>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="changeCurrent"
          :current-page="reqParams.page"
          :page-size="reqParams.per_page"
          :total="total">
        </el-pagination>
        <!-- 按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="determineImage">确 定</el-button>
        </span>
     </el-dialog>
  </div>
</template>

<script>
import img from '@/assets/images/default.png'
export default {
  name: 'MyCover',
  props: ['value'],
  data () {
    return {
      // 控制对话框显示或隐藏 默认隐藏
      dialogVisible: false,
      // 选项卡 默认选中第一个
      activeName: 'material',
      // 获取素材请求参数
      reqParams: {
        // 按钮单选框 控制全部还是收藏
        collect: false,
        // 当前页
        page: 1,
        // 页码
        per_page: 8
      },
      // 获取到的图片素材
      images: [],
      total: 0,
      // 控制是否选中
      curentImage: null,
      // 预览路径
      imageUrl: null,
      // 文件上传的地址,需要是完整的地址
      imageBaseUrl: this.$axios.defaults.baseURL + '/mp/v1_0/user/images',
      // 上传图片的请求头
      imageHeaders: {
        Authorization: window.localStorage.getItem('token')
      },
      // 封面按钮
      coverImg: img
    }
  },
  created () {
    this.getImage()
  },
  methods: {
    // 获取图片数据和分页数据
    async getImage () {
      const { data: { data } } = await this.$axios.get('/mp/v1_0/user/images', { params: this.reqParams })
      // console.log(data)
      this.images = data.results
      this.total = data.total_count
    },
    // 弹出对话框
    popupDialog () {
      // 弹出对话框之前把预览图片和选中图片 恢复成默认
      this.imageUrl = null
      this.curentImage = null
      this.activeName = 'material'
      this.reqParams.page = 1
      this.dialogVisible = true
    },
    // 全部还是收藏
    toggleCollect () {
      this.reqParams.page = 1
      this.getImage()
    },
    // 分页跳转
    changeCurrent (currentPage) {
      this.reqParams.page = currentPage
      this.getImage()
    },
    // 添加遮罩
    addMask (imageUrl) {
      // console.log(imageUrl);
      this.curentImage = imageUrl
    },
    // 上传成功
    handleUploadSuccess (result) {
      // console.log(result);
      // 预览图片
      this.imageUrl = result.data.url
    },
    // 确定选图片
    determineImage () {
      if (this.activeName === 'material') {
        if (!this.curentImage) {
          this.$message.warning('请选择一张图片')
          return false
        } else {
          // 选择了图片
          // this.coverImg = this.curentImage
          this.$emit('input', this.curentImage)
        }
      } else if (this.activeName === 'upload') {
        if (!this.imageUrl) {
          this.$message.warning('请上传一张图片')
          return false
        } else {
          // 上传了图片
          // this.coverImg = this.imageUrl
          this.$emit('input', this.imageUrl)
        }
      }
      // 验证通过通知父组件，自定义事件
      this.$emit('through')
      // 验证通过关闭对话框
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="less">

  ::v-deep .el-dialog__body {
    padding-bottom: 0;
  }

  .my-cover {
    display: inline-block;
    margin-right: 20px;
  }
  .cover-btn {
    width: 150px;
    height: 120px;
    border: 1px dashed #ddd;
    margin-top: 20px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  // 素材列表
  .img-list {
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    .img-item {
      position: relative;
      width: 180px;
      height: 130px;
      border: 1px dashed #ddd;
      margin-right: 20px;
      margin-bottom: 20px;
      &.active {
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, .4) url("../assets/images/selected.png") no-repeat center / 50% 50%;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
